<template>
  <el-dialog title="预览文章" :visible="showPreviewDialog" @close="btnCancel">
    <h2>{{ preview.title }}</h2>
    <div>
      <span> {{ preview.createTime | parseTimeByString }} </span>
      <span> {{ preview.username }} </span>
      <span> <i class="el-icon-view"></i> {{ preview.visits }}</span>
    </div>
    <div v-html="preview.articleBody" style="border-top: 2px dotted #ccc;background:#eee;margin-top:10px" ></div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    preview: {
      type: Object,
      required: true
    }
  },
  methods: {
    btnCancel () {
      this.$parent.showPreviewDialog = false
    }
  }
}
</script>

<style scoped lang='scss'></style>
